<template>
  <div class="metric-manage">
    <div class="top">
      <div class="query-form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="指标：">
            <el-input   v-model="formInline.quotaName" placeholder="请输入指标名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
        <span>
          <span> <el-button type="primary" @click="addItem">添加指标</el-button></span>
          <span style="margin-left: 5px"> <el-button type="primary" @click="setGps">GPS指标设置</el-button></span>
        </span>
    </div>

    <div>
      <el-scrollbar height="600px">
        <div style="overflow-x: hidden">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" v-for="(item,index) in tableData" :key="index">
              <el-card :class="['item', setTitColor(index)]" @click="changeItem(index)">
                <div class="title">
                  <div class="tit"><span>{{item.name}}</span></div>
                  <div class="del" @click.stop="delItem(item.id)"><el-icon><close/></el-icon></div>
                </div>
                <div><span style="color: #818693;font-size: 14px;margin-right: 10px;">单位:</span><span style="color: #333;line-height: 23px;">{{item.unit}}</span></div>
                <div><span style="color: #818693;font-size: 14px;margin-right: 10px;">安全值:</span><span style="color: #333;line-height: 23px;">{{item.referenceValue}}</span></div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>

    <el-dialog
      v-model="quotaDialogVisible"
      width="500px"
      center
      @close="resetForm('quota')"
    >
      <template #title>
        <div
          class="dialog-title"
        >
          {{title}}
        </div>
      </template>
      <el-form
        :rules="rules"
        :model="form"
        ref="quota"
        label-width="140px"
      >
        <el-form-item
          prop="name"
          label="指标名称："
        >
          <el-input
            placeholder="请输入指标名称"
            v-model="form.name"
            size="small"
            maxlength='10'
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="unit"
          label="单位："
        >
          <el-input
            placeholder="请输入单位"
            v-model="form.unit"
            maxlength='10'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="subject"
          label="报文主题："
        >
          <el-input
            placeholder="请输入报文主题"
            v-model="form.subject"
            maxlength='50'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="valueType"
          label="指标值数据类型："
        >
          <el-select
            placeholder="请选择指标值数据类型"
            v-model="form.valueType"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="valueKey"
          label="指标值字段："
        >
          <el-input
            placeholder="请输入指标值字段"
            v-model="form.valueKey"
            size="small"
            maxlength='50'
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="snKey"
          label="设备识别码字段："
        >
          <el-input
            placeholder="请输入设备识别码字段"
            v-model="form.snKey"
            maxlength='50'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="webhook"
          label="web hook："
        >
          <el-input
            placeholder="请输入web hook"
            v-model="form.webhook"
            maxlength='50'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="referenceValue"
          label="安全值："
        >
          <el-input
            placeholder="请输入安全值"
            v-model="form.referenceValue"
            maxlength='20'
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div
          class="dialog-footer"
        >
          <el-button
            @click="resetForm('quota')"
            size="small"
            class="butBox"
          >取 消</el-button>
          <el-button
            type="primary"
            @click="submitQuotaForm('quota')"
            size="small"
            class="butBox"
            style="margin-left:30px"
          >确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="GPSDialogVisible"
      width="500px"
      center
    >
      <template #title>
        <div
          class="dialog-title"
        >
          GPS指标
        </div>
      </template>
      <el-form
        :model="gpsForm"
        :rules="gpsRules"
        ref="gps"
        label-width="140px"
      >
        <el-form-item
          prop="subject"
          label="报文主题："
        >
          <el-input
            placeholder="请输入报文主题"
            v-model="gpsForm.subject"
            maxlength='20'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="snKey"
          label="设备识别码字段："
        >
          <el-input
            placeholder="请输入设备识别码字段"
            maxlength='50'
            v-model="gpsForm.snKey"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="singleField"
          label="指标值类型："
        >
          <el-radio-group v-model="gpsForm.singleField">
            <el-radio :label="true">单字段</el-radio>
            <el-radio :label="false">多字段</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="gpsForm.singleField"
          prop="valueKey"
        >
          <el-input
            placeholder="请输入指标值字段（经纬度）"
            v-model="gpsForm.valueKey"
            maxlength='20'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="gpsForm.singleField"
          prop="separation"
        >
          <el-input
            placeholder="请输入分隔符"
            v-model="gpsForm.separation"
            maxlength='20'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!gpsForm.singleField"
          prop="longitude"
        >
          <el-input
            placeholder="请输入指标值字段（经度）"
            v-model="gpsForm.longitude"
            size="small"
            maxlength='20'
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!gpsForm.singleField"
          prop="latitude"
        >
          <el-input
            placeholder="请输入指标值字段（纬度）"
            v-model="gpsForm.latitude"
            size="small"
            maxlength='20'
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div
          class="dialog-footer"
        >
          <el-button
            @click="GPSDialogVisible = false"
            size="small"
            class="butBox"
          >取 消</el-button>
          <el-button
            type="primary"
            @click="submitGPSForm('gps')"
            size="small"
            class="butBox"
            style="margin-left:30px"
          >确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { addQuota, delQuota, putQuota, quota } from '@/api/quota'
import {
  Close
} from '@element-plus/icons-vue'
import { addGps, gps, putGps } from '@/api/gps'
@Options({
  components: {
    Close
  }
})
export default class metricManage extends Vue {
  private formInline = {
    quotaName: ''
  }

  private options = [
    {
      value: 'Integer',
      label: '整数'
    },
    {
      value: 'Double',
      label: '小数'
    }
  ]

  // 添加指标数据
  private form = {
    name: '',
    unit: '',
    subject: '',
    valueKey: '',
    valueType: '',
    snKey: '',
    webhook: '',
    referenceValue: ''
  }

  private setTitColor (index: number) {
    switch (index % 6) {
      case 1: {
        return 'colStyB'
      }
      case 2: {
        return 'colStyC'
      }
      case 3: {
        return 'colStyD'
      }
      case 4: {
        return 'colStyE'
      }
    }
  }

  // GPS指标
  private gpsForm = {
    subject: '',
    snKey: '',
    singleField: true,
    valueKey: '',
    separation: '',
    latitude: '',
    longitude: ''
  }

  private quotaDialogVisible =false
  private GPSDialogVisible =false
  private page = 1
  private pageSize = 20
  private total = 1
  private tableData: any = []
  private loading = false
  private getDataType = ''
  private title = '添加指标'
  // 是否新增指标
  private isAddPut = true
  // 是否新增GPS
  private isGpsAddPut = true
  private changeInd = ''

  private rules: any = {
    name: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
    unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
    subject: [{ required: true, message: '请输入报文主题', trigger: 'blur' }],
    valueKey: [
      { required: true, message: '请输入指标值字段', trigger: 'blur' }
    ],
    valueType: [
      { required: true, message: '请选择指标值字段类型', trigger: 'change' }
    ],
    snKey: [
      { required: true, message: '请输入设备识别码字段', trigger: 'blur' }
    ],
    webhook: [{ required: true, message: '请输入web hook', trigger: 'blur' }],
    referenceValue: [
      { required: true, message: '请输入安全值', trigger: 'blur' }
    ]
  }

  private gpsRules = {
    subject: [{ required: true, message: '请输入报文主题', trigger: 'blur' }],
    snKey: [
      { required: true, message: '请输入设备识别码字段', trigger: 'blur' }
    ],
    singleField: [
      { required: true, message: '请选择指标值类型', trigger: 'change' }
    ],
    valueKey: [
      { required: true, message: '请输入指标值字段（经纬度）', trigger: 'blur' }
    ],
    separation: [{ required: true, message: '请输入分隔符', trigger: 'blur' }],
    latitude: [
      { required: true, message: '请输入指标值字段（纬度）', trigger: 'blur' }
    ],
    longitude: [
      { required: true, message: '请输入指标值字段（经度）', trigger: 'blur' }
    ]
  };

  // 查询
  private onSubmit () {
    this.page = 1
    this.getDataType = 'search'
    this.getList()
  }

  // 添加指标
  private addItem () {
    this.quotaDialogVisible = true
  }

  // 修改指标
  private changeItem (refId: any) {
    this.changeInd = refId
    this.quotaDialogVisible = true
    this.title = '修改指标'
    this.isAddPut = false
    this.$nextTick(() => {
      this.form = Object.assign({}, this.tableData[refId])
    })
  }

  // 删除指标
  private async delItem (refId: any) {
    const _self = this as any
    _self.$confirm('确认删除?', '', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(async () => {
      const data: any = await delQuota(refId)
      await this.getList()
    }).catch((err:any) => {
      console.log(err)
      console.log('取消操作！')
    })
  }

  // 设置gps指标
  private async setGps () {
    this.GPSDialogVisible = true
    const data: any = await gps()
    if (data.id) {
      await this.$nextTick(() => {
        this.gpsForm = Object.assign({}, data)
      })
      // this.isGpsAddPut = false
    } else {
      await this.$nextTick(() => {
        (this as any).$refs.gps.resetFields()
      })
    }
  }

  // 添加指标提交
  private submitQuotaForm (refId: any) {
    (this as any).$refs[refId].validate(async (valid: boolean) => {
      if (valid) {
        let data: any
        if (this.isAddPut) {
          delete (this as any).form.id
          data = await addQuota(this.form)
          if (data) {
            this.tableData.unshift(this.form)
            await this.getList()
          }
        } else {
          data = await putQuota(this.form)
          if (data) {
            this.tableData[this.changeInd] = this.form
            await this.getList()
          }
        }
        this.quotaDialogVisible = false
      }
    })
  }

  // 添加/修改GPS指标提交
  private submitGPSForm (refId: any) {
    (this as any).$refs[refId].validate(async (valid: boolean) => {
      if (valid === true) {
        if (this.isGpsAddPut) {
          const data: any = await addGps(this.gpsForm)
        } else {
          const data: any = await putGps(this.gpsForm)
        }
        this.GPSDialogVisible = false
      }
    })
  }

  private async getList () {
    this.loading = true
    const data: any = await quota({
      page: this.page,
      pageSize: this.pageSize,
      ...this.formInline
    })
    if (this.getDataType === 'page') {
      this.tableData = [...this.tableData, ...data.items]
      this.getDataType = ''
    } else {
      this.tableData = data.items
    }
    this.total = data.counts
    this.loading = false
  }

  private resetForm (refId: any) {
    (this as any).$refs[refId].resetFields()
    this.quotaDialogVisible = false
    this.GPSDialogVisible = false
  }

  mounted () {
    this.getList()
  }
}
</script>

<style  lang="scss" scoped>
.metric-manage{
  padding:20px;
  .top{
    display: flex;
    justify-content: space-between;
  }
}
.content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item{
  .title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .tit{
      display: flex;
      position: relative;
      padding: 0 15px;
      width: 100px;
      height: 32px;
      line-height: 32px;
      overflow: hidden;
      color:#fff;
      //background: linear-gradient(left, #6EC1FF, #5584FF);
      background: linear-gradient(to right,#6EC1FF,#5584FF);
      border-radius:0 15px 15px 15px;
      .iconfont{
        margin-right: 10px;
      }
    }
  }
  .del{
    display: none;
    color: #D8D8D8;
    position: relative;
    cursor: pointer;
    right: 5px;
    top: 5px;
  }
  &:hover .del{
    display: block;
  }
}
.colStyB{
  .title{
    .tit{
      background: linear-gradient(to right, #FF5133, #B075FF);
    }
  }
}
.colStyC{
  .title{
    .tit{
      background: linear-gradient(to right, #5CE2D1, #55C4FF);
    }
  }
}
.colStyD{
  .title{
    .tit{
      background: linear-gradient(to right, #FF4E6D, #FF6941);
    }
  }
}
.colStyE{
  .title{
    .tit{
      background: linear-gradient(to right, #FFB16E, #FF7955);
    }
  }
}
.colStyF{
  .title{
    .tit{
      background: linear-gradient(to right, #45D282, #17CD99);
    }
  }
}

.el-card{
  --el-card-padding: 0px 0px 10px 10px;
  min-width: calc(20% - 22px);
  height: 120px;
}
.el-row:first-child{
  margin-top: 10px;
}
.el-row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}

</style>
